import { BasicColumn } from '/@/components/Table';
import { FormSchema } from '/@/components/Table';
import { h } from 'vue';
import { Icon } from '/@/components/Icon';
import { ajaxGetDictItems } from "./menu.api";
import { render } from "/@/utils/common/renderUtils";
import { useUserStore } from '/@/store/modules/user';

const userStore = useUserStore()
const selectTenant = userStore.getSelectTenant
const isDir = (type) => type === "0";
const isMenu = (type) => type === "1";
const isButton = (type) => type === "2";

// 定义可选择的组件类型
export enum ComponentTypes {
  Default = 'layouts/default/index',
  IFrame = 'sys/iframe/FrameBlank',
}

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    width: 220,
    align: 'left',
  },
  {
    title: '菜单类型',
    dataIndex: 'menuTypeText',
    width: 80,
    // customRender: ({text}) => {
    //   return  render.renderDict(text, 'menu_type')
    // }
  },
  {
    title: '权限标识',
    dataIndex: 'perms',
    width: 120,
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 50,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.icon });
    },
  },
  {
    title: '组件',
    dataIndex: 'component',
    align: 'left',
    width: 150,
  },
  {
    title: '路径',
    dataIndex: 'path',
    align: 'left',
    width: 150,
  },
  {
    title: '排序',
    dataIndex: 'sortNum',
    width: 90,
  }
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'name',
    label: '菜单名称',
    component: 'Input'
  },
  {
    field: 'sceneId',
    label: '场景',
    show: !selectTenant?.isMgtSceneTenant || userStore.getIsSysAdminTenant,
    component: 'ApiSelect',
  },
  {
    field: 'checkMenu',
    component: 'Select',
    label: '校验菜单',
    show:  userStore.getIsSysAdminTenant,
    helpMessage: [
      '筛选出菜单类型为权限且存在无效的权限标识',
      '需要进行资源同步, 才能筛选最新的无效权限标识菜单'
    ],
    colProps: {
      span: 4,
    },
    defaultValue: null,
    componentProps: {
      allowClear: true,
      options: [
        {
          label: '是',
          value: true,
          key: '1',
        },
        {
          label: '否',
          value: false,
          key: '2',
        },
      ],
    },
  },
];

export const formSchema: FormSchema[] = [
  {
    label: 'id',
    field: 'id',
    component: 'Input',
    show: false
  },
  {
    field: 'menuType',
    label: '菜单类型',
    component: 'RadioButtonGroup',
    defaultValue: "0",
    componentProps: ({ formActionType }) => {
      return {
        options: [
          { label: '一级菜单', value: "0" },
          { label: '子菜单', value: "1" },
          { label: '按钮/权限', value: "2" },
        ],
        onChange: e => {
          const { updateSchema, clearValidate } = formActionType
          // const label = isButton(e) ? '按钮/权限' : '菜单名称';
          const label = isButton(e) ? '菜单名称' : '菜单名称';
          //清除校验
          clearValidate();
          updateSchema([{
            field: 'name',
            label: label
          }, {
            field: 'url',
            required: !isButton(e)
          }]);
        }
      }
    }
  },
  {
    field: 'name',
    label: '菜单名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'code',
    label: '菜单标识',
    helpMessage: '主要用于一些业务场景处理(eg: 配置中心菜单就使用了), 一般不需要填写',
    component: 'Input',
    required: false,
    
  },
  {
    field: 'perms',
    label: '权限标识',
    component: 'ApiSelect',
    componentProps: {
      mode: 'tags',
      dropdownStyle: { maxHeight: '100vh', overflow: 'auto' },
    },
    ifShow: ({ values }) => isButton(values.menuType)
  },
  {
    field: 'mergeAddPerm',
    label: '合并权限',
    helpMessage: '当选择非合并添加权限时, 选中的多个权限会作为多条记录添加',
    component: 'Switch',
    colProps: { span: 24 },
    defaultValue: true,
    componentProps: {
      checkedChildren: "是",
      unCheckedChildren: "否"
    },
    ifShow: ({ values }) => isButton(values.menuType)
  },
  {
    field: 'parentId',
    label: '上级菜单',
    component: 'MyTreeSelect',
    required: true,
    componentProps: {
      fieldNames: {
        title: 'name',
        key: 'id',
        value: 'id',
      }
    },
    ifShow: ({ values }) => !isDir(values.menuType),
  },
  {
    field: 'path',
    label: '访问路径',
    component: 'Input',
    helpMessage: [
      "如果是内嵌或者外部地址, 则该值需要填写名称, 而不能是http(s)://xxx, eg: doc",
      "如果是外部地址, 需要选择打开方式为外部",
    ],
    required: true,
    defaultValue: '#',
    ifShow: ({ values }) => !(values.component === ComponentTypes.IFrame && values.internalOrExternal),
  },
  {
    field: 'component',
    label: '前端组件',
    component: 'Input',
    componentProps: {
      placeholder: '请输入前端组件'
    },
    // defaultValue: 'layouts/RouteView',
    defaultValue: 'layout',
    required: true,
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'frameSrc',
    label: 'Iframe地址',
    component: 'Input',
    rules: [
      { required: true, message: '请输入Iframe地址' },
      { type: 'url', message: '请输入正确的url地址' },
    ],
    ifShow: ({ values }) => !isButton(values.menuType) && values.component === ComponentTypes.IFrame,
  },
  {
    field: 'redirect',
    label: '默认跳转地址',
    component: 'Input',
    ifShow: ({ values }) => isDir(values.menuType),
  },
  {
    field: 'permsType',
    label: '授权策略',
    component: 'RadioGroup',
    defaultValue: '1',
    helpMessage: ['可见/可访问(授权后可见/可访问)', '可编辑(未授权时禁用)'],
    componentProps: {
      options: [
        { label: '可见/可访问', value: '1' },
        { label: '可编辑', value: '2' },
      ],
    },
    ifShow: ({ values }) => isButton(values.menuType),
  },
  {
    field: 'status',
    label: '状态',
    component: 'RadioGroup',
    defaultValue: '1',
    componentProps: {
      options: [
        { label: '有效', value: '1' },
        { label: '无效', value: '0' },
      ],
    },
    ifShow: ({ values }) => isButton(values.menuType),
  },
  {
    field: 'icon',
    label: '菜单图标',
    component: 'IconPicker',
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'sortNum',
    label: '排序',
    component: 'InputNumber',
    defaultValue: 1
  },
  {
    field: 'route',
    label: '是否路由菜单',
    component: 'Switch',
    defaultValue: true,
    colProps: { span: 24 },
    componentProps: {
      checkedChildren: "是",
      unCheckedChildren: "否"
    },
    ifShow: ({ values }) => !isButton(values.menuType)
  },
  {
    field: 'hideMenu',
    label: '隐藏菜单',
    component: 'Switch',
    colProps: { span: 24 },
    defaultValue: false,
    componentProps: {
      checkedChildren: "是",
      unCheckedChildren: "否"
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'hideTab',
    label: '隐藏Tab',
    helpMessage: '隐藏tab后, 则激活的是父级tab, 所以不能将父级tab也进行隐藏',
    component: 'Switch',
    colProps: { span: 24 },
    defaultValue: false,
    componentProps: {
      checkedChildren: '是',
      unCheckedChildren: '否',
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'keepAlive',
    label: '是否缓存路由',
    colProps: { span: 24 },
    component: 'Switch',
    defaultValue: false,
    componentProps: {
      checkedChildren: "是",
      unCheckedChildren: "否"
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'alwaysShow',
    label: '聚合路由',
    component: 'Switch',
    colProps: { span: 24 },
    defaultValue: false,
    componentProps: {
      checkedChildren: "是",
      unCheckedChildren: "否"
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'external',
    label: '打开方式',
    component: 'Switch',
    colProps: { span: 24 },
    defaultValue: false,
    componentProps: {
      checkedChildren: "外部",
      unCheckedChildren: "内部"
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  },
  {
    field: 'isMainOut',
    label: '主框架外',
    component: 'Switch',
    colProps: { span: 24 },
    defaultValue: false,
    componentProps: {
      checkedChildren: "是",
      unCheckedChildren: "否"
    },
    ifShow: ({ values }) => !isButton(values.menuType),
  }
];

export const dataRuleColumns: BasicColumn[] = [
  {
    title: '规则名称',
    dataIndex: 'ruleName',
    width: 150,
  },
  {
    title: '规则编码',
    dataIndex: 'ruleCodeText',
    width: 100,
  },
  {
    title: '规则字段',
    dataIndex: 'ruleColumn',
    width: 100,
  },
  {
    title: '规则值',
    dataIndex: 'ruleValue',
    width: 100,
  }
];

export const dataRuleSearchFormSchema: FormSchema[] = [
  {
    field: 'ruleName',
    label: '规则名称',
    component: 'Input',
    colProps: { span: 6 },
  },
  {
    field: 'ruleValue',
    label: '规则值',
    component: 'Input',
    colProps: { span: 6 },
  }
];

export const dataRuleFormSchema: FormSchema[] = [
  {
    label: 'id',
    field: 'id',
    component: 'Input',
    show: false
  },
  {
    field: 'ruleName',
    label: '规则名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'ruleColumn',
    label: '规则字段',
    helpMessage: '代码中实体类的字段名',
    component: 'Input',
    ifShow: ({ values }) => {
      const ruleConditions = values.ruleConditions
      return ruleConditions !== 'data_my' && ruleConditions !== 'data_my_current_dept' && ruleConditions !== 'data_my_all_dept' && ruleConditions !== 'USE_SQL_RULES'
    },
  },
  {
    field: 'ruleCode',
    label: '规则编码',
    required: true,
    component: 'ApiSelect',
    componentProps: {
      api: ajaxGetDictItems,
      params: { code: 'data_rule_code' },
      labelField: 'label',
      valueField: 'value',
      getPopupContainer: (node) => document.body,
    }
  },
  {
    field: 'ruleConditions',
    label: '条件规则',
    required: true,
    component: 'ApiSelect',
    componentProps: {
      api: ajaxGetDictItems,
      params: { code: 'rule_conditions' },
      labelField: 'label',
      valueField: 'value',
      getPopupContainer: (node) => document.body,
    }
  },
  {
    field: 'ruleValue',
    label: '规则值',
    component: 'Input',
    // required: true,
    ifShow: ({ values }) => {
      const ruleConditions = values.ruleConditions
      return ruleConditions !== 'data_my' && ruleConditions !== 'data_my_current_dept' && ruleConditions !== 'data_my_all_dept'
    },
  },
  {
    field: 'status',
    label: '状态',
    component: 'RadioButtonGroup',
    defaultValue: '1',
    componentProps: {
      options: [
        { label: '无效', value: '0' },
        { label: '有效', value: '1' },
      ],
    }
  }
];



export const copyMenuFormSchema: FormSchema[] = [
  {
    label: 'id',
    field: 'id',
    component: 'Input',
    show: false
  },
  {
    field: 'sceneId',
    label: '场景',
    component: 'ApiSelect',
    componentProps: {
      // mode: "multiple",
      optionFilterProp: "label",
      showSearch: true,
    }
  },
];